<div class="layui-card">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;line-height: 50px;">
        <a lay-href="">概览</a>
        <a><cite>基础设置</cite></a>
        <a><cite>公式管理</cite></a>
    </div>
    <div class="luomi-title" style="margin-top: 10px;margin-left: -60px; display: flex;justify-content: center;"></div>
</div>





<div class="search">
    <div>
        <form class="layui-form" action="" lay-filter="formulaForm">
            <div class="layui-form-item">
            <div class="layui-input-inline" style="width:20%;margin-right: 20px;">
                <input type="text" name="ftagname" value=""  placeholder="公式编码" autocomplete="off" class="layui-input" >
            </div>
            <div class="layui-input-inline" style="width:20%;margin-right: 20px;">
                <input type="text" name="fname" value="" placeholder="公式名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 20%;margin-right: 20px;">
                <select name="ftype" lay-verify="required">
                <option value="0">全部类型</option>
                <option value="1">计算点</option>
                <option value="2">用户点</option>
                </select>
            </div>
        </div>
            <div class="layui-form-item">
                 <div class="layui-input-inline" style="width:20%;margin-right:20px">
                    <select name="date" lay-verify="required" lay-filter="dateSelect"> 
                        <option value="year">年</option>
                        <option value="month">月</option>
                        <option value="day">日</option>
                        </select>
                 </div>
                 <div class="layui-input-inline " style="width:30%;margin-right:20px;display: flex;">
                    <input type="text" name="year" lay-filter="year" placeholder="yyyy" autocomplete="off" class="layui-input" id="year" style="width: 67%;">
                    <input type="text" name="month" lay-filter="month" placeholder="yyyy-MM" autocomplete="off" class="layui-input hide" id="month" style="margin-right: 20px;">
                    <input type="text" name="month2" lay-filter="month2" placeholder="yyyy-MM" autocomplete="off" class="layui-input hide" id="month2">    
                    <input type="text" name="day" lay-filter="day" placeholder="yyyy-MM-DD" autocomplete="off" class="layui-input hide" id="day" style="margin-right: 20px;">
                    <input type="text" name="day2" lay-filter="day" placeholder="yyyy-MM-DD" autocomplete="off" class="layui-input hide" id="day2">
                 </div>
                 <div class="layui-input-inline">
                     <button type="button" class="layui-btn layui-btn" lay-submit lay-filter="LAY-formula-search">搜索</button>
                 </div>
            </div>
            

          
        </form>
    </div>

    <table id="formulaTable" lay-filter="formulaTable"></table>
</div>

<script type="text/html" id="formulaBar">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
        <i class="layui-icon layui-icon-addition"></i>
        增加
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">
        <i class="layui-icon  layui-icon-edit"></i>
        修改
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>

<script type="text/html" id="ftype">
    {{# if(d.ftype == '1') { }}
        计算点
    {{# } else { }}
        用户点
    {{# } }}
</script>


<style>
    .hide {
        display: none;
    }
</style>


<script>
    layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view',
        'setter', 'upload','laydate'
    ], function () {
        var $ = layui.$,
            admin = layui.admin,
            table = layui.table,
            laytpl = layui.laytpl,
            form = layui.form,
            laypage = layui.laypage,
            layer = layui.layer,
            laydate = layui.laydate
            view = layui.view,
            setter = layui.setter;
            form.render();
        

  var getTable = function(dayMonthYear,ftagname,fname,ftype,intime,outime){
        //第一个实例
    table.render({
        elem: '#formulaTable'
        ,url: 'http://www.iotddc.com/IOTDDC/formula/formulaPaging' //数据接口
        ,page: true
        ,method:'post'
        ,where:{
            token:'EEAADD2299AAEE226677331177885599',
            dayMonthYear,
            ftagname,
            fname,
            ftype,
            intime,
            outime
        },
        // ,response:{
        //     statusName:'code',
        //     statusCode:200,
        //     dataName:'Datas',
        //     countName: "code",
        // },
        parseData:function(res){
            var value  = {
                code:res.code,
                msg:res.message ? res.message : "",
                Datas:res.Datas ? res.Datas : [],
                paging:{
                    count:res.paging ? res.paging.count : 0
                }
            }
            return {
                "code":res.code,
                "msg":value.msg,
                "count":value.paging.count,
                "data":value.Datas
            }
        },
        response:{
            statusName:'code',
            statusCode:200
        }
        ,toolbar:"#formulaBar"
        ,defaultToolbar:[]
        ,cols: [[ //表头
        {type:'checkbox'},
        {field: 'fid', title: '公式ID',width:80}
        ,{field: 'ftagname', title: '公式编码'}
        ,{field: 'fname', title: '公式名称'}
        ,{text: 'ftype', title: '公式类型',templet:'#ftype',width:120} 
        ,{field: 'formulaviwe', title: '公式内容'}
        ,{field: 'val', title: '计算结果'}
        ,{field: 'Remark', title: '公式说明'}
        ]]
    });
  }

  getTable('','','','','','')

  table.on('toolbar(formulaTable)',function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    if(obj.event === 'add'){
        admin.popup({
            title:'新建公式',
            area:['600px','500px'],
            id:'LAY-popup-formula-add',
            success:function(layero,index){
                view(this.id).render('/formula/formula-popup-add').done(function(){
                    form.on('submit(LAY-formula-add)',function(obj){
                        var data = obj.field;
                        admin.req({
                            method:'post',
                            url:"http://www.iotddc.com/IOTDDC/formula/addFormula",
                            data:{
                                token:'EEAADD2299AAEE226677331177885599',
                                fname:data.fname,
                                formula:data.formula,
                                formulaviwe:data.formulaview,
                                ftagname:data.ftagname,
                                ftype:data.ftype,
                                remark:data.remark
                            },
                            done:function(res){
                                layer.msg(res.message)
                                layui.table.reload('formulaTable');
                                layer.close(index)
                            }
                        })
                    })
                })
            }
        })
    }else if(obj.event === 'edit'){
        if(checkStatus.data.length >1){
            layer.msg('每次只能修改一条公式')
        }else if(checkStatus.data.length == 0){
            layer.msg('请选择公式后修改')
        }else {
            var fid = checkStatus.data[0].fid
            // console.log(checkStatus.data[0]);
            admin.popup({
            title:'编辑公式',
            area:['600px','500px'],
            id:'LAY-popup-formula-edit',
            success:function(layero,index){
                view(this.id).render('/formula/formula-popup-add',checkStatus.data[0]).done(function(){
                    form.on('submit(LAY-formula-add)',function(obj){
                        var data = obj.field;
                        console.log(obj);
                        admin.req({
                            method:'post',
                            url:'http://www.iotddc.com/IOTDDC/formula/UpdateFormula',
                            data:{
                                token:'EEAADD2299AAEE226677331177885599',
                                fid:fid,
                                fname:data.fname,
                                formula:data.formula,
                                formulaviwe:data.formulaview,
                                ftagname:data.ftagname,
                                ftype:data.ftype,
                                remark:data.remark
                            },
                            done:function(res){
                                layer.msg(res.message)
                                layui.table.reload('formulaTable');
                                layer.close(index)
                            }
                        })
                        
                    })

                })

            }

            });
        }
    }else if(obj.event === 'delete'){
        if(checkStatus.data.length != 0){
        layer.confirm('确定要删除公式吗?',{
            btn:['删除','取消']
        },function(index){
            var mid = ''
            layui.each(checkStatus.data,function(index,item){
                // console.log(item);
                mid += item.fid + ','
            })
            mid = mid.substr(0,mid.length -1)
            // console.log(mid);
            admin.req({
                method:'post',
                url:'http://www.iotddc.com/IOTDDC/formula/delFormula',
                data:{
                    token:'EEAADD2299AAEE226677331177885599',
                    mid:mid
                },
                done:function(res){
                    layui.table.reload('formulaTable'); //重载表格
                    layer.msg(res.message)
                }
            })
        })
        }
        else{
            layer.msg('请选择要删除的公式')
        }
    }
  })

  laydate.render({
      elem:"#year",
      type:'year',
      value:new Date()
  })

  form.on('select(dateSelect)',function(event){
      if(event.value === 'month'){
          laydate.render({
              elem:"#month",
              type:'month',
              value:new Date()
          })
          laydate.render({
              elem:"#month2",
              type:'month',
              value:new Date()
          })
          $('#month').removeClass('hide').siblings().addClass('hide')
          $('#month2').removeClass('hide')
      }else if(event.value === 'day'){
        laydate.render({
            elem:"#day",
            value:new Date()
        })
        laydate.render({
            elem:"#day2",
            value:new Date()
        })
        $('#day').removeClass('hide').siblings().addClass('hide')
        $('#day2').removeClass('hide');
    }else{
        laydate.render({
            elem:'#year',
            type:'year',
            value:new Date()
        })
        $('#year').removeClass('hide').siblings().addClass('hide')
    }
      
  })

  form.on('submit(LAY-formula-search)',function(obj){
      var data = obj.field;
      var dayMonthYear = data.date;
      var ftagname = data.ftagname;
      var fname = data.fname
      var ftype = data.ftype == "0"  ? "" : data.ftype
      if(dayMonthYear === 'year'){
          var intime = data.year;
          var outime = data.year
      }else if(dayMonthYear === 'month'){
          var intime = data.month
          var outime = data.month2
      }else if(dayMonthYear === 'day'){
          var intime = data.day
          var outime = data.day2
      }
      getTable(dayMonthYear,ftagname,fname,ftype,intime,outime)
    
  })


  
});
</script>